<template>
  <v-card class="mx-auto d-md-flex justify-center" outlined>
      <v-col xl="2" lg="2" md="3" sm="12" class="d-flex justify-center align-center ml-lg-4  ">
        <v-avatar size="90">
          <img
            src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4075663167,1198688310&fm=26&gp=0.jpg"
          />
        </v-avatar>
      </v-col>
      <v-col class="py-0 ">
        <v-col class="pt-0 pt-xl-4 pt-lg-4 pt-md-4" :class="$vuetify.breakpoint.width <= 768 ?'text-center':''"><span class="text-h4">ENothing</span></v-col>
        <v-col class="  py-0" :class="$vuetify.breakpoint.width <= 768 ?'text-center':''"
          ><v-icon small>mdi-briefcase</v-icon>
          <span class="text-caption"> PHP\Golang\Python</span></v-col
        >
        <v-col :class="$vuetify.breakpoint.width <= 768 ?'text-center':''"
          ><v-icon small>mdi-card-account-details</v-icon>
          <span class="text-body-2"> 船到桥头自然直</span></v-col
        >
      </v-col>
      <v-col class="pt-0 pt-xl-4 pt-lg-4 pt-md-4 ">
        <v-col class="d-flex justify-center pt-0 pt-xl-4 pt-lg-4 pt-md-4 ">
          <span class="">
            <i class="iconfont icon-qq item_icon"></i>
          </span>
          <span>
            <i class="iconfont icon-yduixinlangweibo item_icon"></i>
          </span>
          <span>
            <i class="iconfont icon-logo-wechat item_icon"></i>
          </span>
        </v-col>
        <v-col class="d-flex justify-center align-center pt-0 pt-xl-4 pt-lg-4 pt-md-4 ">
          <nuxt-link to="/edituserinfo" class="blue--text text-accent-3 text-decoration-none">
          <v-btn tile color="banzhuan" outlined>
            <v-icon left> mdi-pencil </v-icon>
            编辑资料
          </v-btn>
          </nuxt-link>

        </v-col>
      </v-col>
  </v-card>
</template>

<script>
export default {}
</script>

<style scoped>
.item_icon{
  font-size: 1.5rem;
  padding: 0 5px 0 5px;
}
</style>
